import React, { Component } from 'react';
import {Button, message, Modal} from 'antd'
import { withRouter } from 'react-router-dom'
import { ExclamationCircleOutlined } from '@ant-design/icons';

import { formateDate } from '../../utils/dateUtils'
import memoryUtils from '../../utils/memoryUtils'
import storageUtils from '../../utils/storageUtils'
import menuList from '../../config/menuConfig1'
import { reqWeather } from '../../api'
import './index.less'
import jsonp from "jsonp";

const { confirm } = Modal;

class Index extends Component {

    state = {
        currentTime: formateDate(Date.now()), // 当前时间
        type: '',                           // 天气状况
        high: '',        // 最高温度范围
        low: '',    // 最低温度
    }

    getTime = () => {
      this.timer = setInterval(() => {
          const currentTime = formateDate(Date.now())
          this.setState({currentTime})
      }, 1000)
    };

    getWeather = async () => {
        // 调用接口请求数据, 异步获取
        const { type, high, low } = await reqWeather('苏州')
        // 更新状态
        this.setState({ type, high, low })
    }

    // jsonp请求的weather接口的请求函数
    // export const reqWeather = (city) => {
    //
    //     return new Promise((resolve, reject) => {
    //         const url = `http://wthrcdn.etouch.cn/weather_mini?city=${city}`
    //         jsonp(url, {}, (err, data) => {
    //             // console.log(err, data);
    //             if (!err && data.desc === 'OK') {
    //                 const { type, high, low } = data.data.yesterday
    //                 // console.log(type, high, low);
    //                 resolve({ type, high, low })
    //             }else {
    //                 message.error('获取天气信息失败!')
    //             }
    //         })
    //     })
    // }
    getTitle = () => {
        // 获取当前路径
        const path = this.props.location.pathname
        let title
        menuList.forEach((item) => {
            if (item.path === path) {
                title = item.title
            } else if (item.children) {
                const cItem = item.children.find(cItem => path.indexOf(cItem.path) === 0)
                if (cItem) {
                    title = cItem.title
                }
            }
        })
        return title
    }

    showConfirmLogout = () => {
        confirm({
            title: '确定退出吗?',
            icon: <ExclamationCircleOutlined />,
            okText: '确定',
            cancelText: '取消',
            onOk: () => {
                // 删除储存的user数据
                storageUtils.removeUser()
                memoryUtils.user = {}
                // 跳转到登录页
                this.props.history.replace('/login')
            }
        });
    }

    componentDidMount() {
        // 获取当前时间
        this.getTime()
        // 获取当前天气
        this.getWeather()
    }

    componentWillUnmount() {
        // 清除定时器
        clearInterval(this.timer)
    }

    render() {
        const { currentTime, type, high, low } = this.state
        const { username } = memoryUtils.user
        const title = this.getTitle()
        return (
            <div className="header">
               <div className="header-top">
                   <span>欢迎, {username}</span>
                   <Button type="link" onClick={this.showConfirmLogout}>退出</Button>
               </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">
                        {title}
                    </div>
                    <div className="header-bottom-right">
                        <span>{currentTime}</span>
                        <img src="https://uploadfile.huiyi8.com/up/6a/a1/16/6aa116b7f58c59cfb52b606c96161330.png.270.jpg" alt="weather"/>
                        <span>{type}</span>
                        <span>{high }~{low}</span>
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(Index);
